<template>
	<view>
		<view class="exerc-card module-back">
			<!-- 题目标题 -->
			<view class="card-title su-border2">
				<view class="title-left">
					<text class="exerc-type">{{ topicType }}</text>
					<text class="exerc-score">({{ itemData.score }}分)</text>
				</view>
				<view class="title-right">
					<text class="crt-text">{{ itemIndex + 1 }}</text>
					<text class="all-text">/{{ exercConfig.num }}</text>
				</view>
			</view>
			<!-- 题目内容 -->
			<view class="card-content">
				<view class="exerc-topic">
					<!-- <text>{{ itemIndex + 1 }}、</text> -->
					<text>{{ itemData.topic || '-' }}</text>
				</view>
				<!-- 题目选择项 -->
				<view class="exerc-options">
					<view class="op-item wkfont" :key="index"
						:class="[isSelect(item)?'select':'']"
						v-for="(item, index) in itemData.optionItems"
						@click="selectTopic(item, itemIndex)" >
						<text class="op-key">{{ item.value }}</text>
						<text class="op-label">{{ item.label }}</text>
					</view>
					<button class="su-button-white" style="margin-top: 40upx;"
						v-if="itemData.type === 'multiple'"
						@click="submitSelect(itemData, itemIndex)">确认选择</button>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	/**
	 * 习题练习页面
	 */
	export default {
		components: {  },
		props: {
			itemData: {
				type: Object,
				default() {
					return {}
				}
			},
			itemIndex: {
				type: Number,
				default: 0
			},
			exercConfig: {
				type: Object,
				default() {
					return {}
				}
			}
		},
		data() {
			return {
				selectData: []
			}
		},
		computed: {
			topicType() {
				const { type } = this.itemData
				let typeName = ''
				switch (type){
					case 'radio':
						typeName = '单选'
						break
					case 'multiple':
						typeName = '多选'
						break
					case 'jude':
						typeName = '判断'
						break
				}
				return typeName
			},
		},
		methods: {
			isSelect(item) {
				const { select, type } = this.itemData
				if (select && (type === 'radio' || type === 'jude')) {
					return select === item.value
				} else if (select && type === 'multiple') {
					let tmpSelect = select.split(',')
					return tmpSelect.includes(item.value)
				} else {
					return false
				}
			},
			// 选择题目
			selectTopic(item, index) {
				const { type, select } = this.itemData
				if ('radio' === type || 'jude' === type) {
					if (select !== item.value) {
						this.$emit('select', { type, index, item })
					}
					this.itemData.select = item.value
				} else if ('multiple' === type) {
					let tmpSelect = []
					if (select) {
						tmpSelect = select.split(',')
					}
					let tmpIndex = tmpSelect.indexOf(item.value)
					if (tmpIndex > -1) {
						tmpSelect.splice(tmpIndex, 1)
					} else {
						tmpSelect.push(item.value)
					}
					tmpSelect = tmpSelect.sort()
					this.itemData.select = tmpSelect.join(',')
				}
			},
			submitSelect(item, index) {
				this.$emit('select', { item, index })
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./exerc-card.scss";
</style>
